<style lang="stylus" scoped>
.gtb-layer
  width: 90%;
  border-radius: 1rem;
  box-shadow: 0.3rem 0.4rem 1rem rgba(0,0,0,.8);
  position: fixed;
  z-index: 1000;
  font-size: 0;
  border: .2rem solid #eecf7a;
  background-color: #000;
  box-sizing: border-box;
  margin-top 30%;
  margin-left 50%
  transform translateX(-50%)
  .gtb-layer-top
    position: relative;
    font-size: 0;
    height: 4rem;
    .gtb-layer-close
      position: absolute;
      z-index: 101;
      border-radius: 100rem;
      right: .7rem;
      top: .7rem;
      display: block;
      width: 2.4rem;
      height: 2.4rem;
      box-shadow: 0.15rem 0.2rem 0.5rem rgba(40,50,100,.7);
      img 
        width 100%
        height 100%
    .gtb-layer-title
      padding-bottom: .5rem;
      text-align: center;
      width: 100%;
      line-height: 4rem;
      font-size: 1.4rem;
      color: #fff;
      text-shadow: 0.1rem 0.2rem 0.4rem rgba(40,50,100,.7);
  .gtb-layer-content
    min-height: 4rem;
    height: auto;
    color: white;
    padding: 0 1.5rem;
    .emailList
      box-sizing: border-box;
      border: .1rem solid #ddcca1;
      width: 100%;
      height: 26.5rem;
      overflow: hidden;
      border-radius: .6rem;
      font-size: 0;
      background-color: #2f2f2f;
      .notData
        height: 10rem;
        line-height: 10rem;
        text-align: center;
        font-size: 2.4rem;
        color: #ddcca1;
    .pt10
      padding-top: 1rem!important;
      a 
        box-sizing: border-box;
        position: relative;
        display: block;
        min-width: 8rem;
        height: 2.8rem;
        line-height: 2.7rem;
        text-align: center;
        text-shadow: 0 0.2rem 0.5rem rgba(0,0,0,.4);
        box-shadow: 0 0.2rem 0.6rem rgba(0,0,0,.4);
        background: linear-gradient(to bottom,#eecf7a,#9b7514 100%);
        font-weight: bold;
        font-size: 1.2rem;
        color: #fff;
        border-bottom: none;
        border-left: none;
        border-right: none;
        border-top: .1rem solid rgba(255,255,255,.7);
        border-radius: 4rem;
  .gtb-layer-bottom
    height: 1.5rem;
    font-size: 0;
</style>

<template>
  <div class="gtb-layer">
    <div class="gtb-layer-top">
      <a class="gtb-layer-close" @click="this.$parent.rechargebtn">
        <img src="../assets/close.png">
      </a>
      <h3 class="gtb-layer-title">消息列表</h3>
    </div>
    <div class="gtb-layer-content">
      <div class="emailList">
        <swiper class="data-swiper" :options="swiperOption" v-if="lists>0">
          <swiper-slide class="slide">
          </swiper-slide>
        </swiper>
        <div v-else class="notData">没有消息</div>
      </div>
      <div class="pt10">
        <a class="btn btn-block"><span>全部删除</span></a>
      </div>
    </div>
    <div class="gtb-layer-bottom"></div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  data(){
    return{
      lists:0
    }
  },
  components: {
    swiper,
    "swiper-slide":swiperSlide
  },
}
</script>
